﻿<!--  
	Binding context: TrackPropertiesViewModel	
-->

<div data-bind="with: editedSong">
	
	<div data-bind="with: song">
		<h3 data-bind="text: 'Artists for song {0}'.replace('{0}', songName)"></h3>		
	</div>
	
	
	<h5>Selected artists <small>(click to remove)</small></h5>
    <div data-bind="foreach: artistSelections">
        <div data-bind="visible: selected, click: function () { selected(false); }, attr: { title: artist.additionalNames }" class="label label-artistSelection">
            <button type="button" class="close">&times;</button>
            <span data-bind="text: artist.name"></span>
        </div>
    </div>
    <span data-bind="ifnot: somethingSelected" class="extraInfo">No artists selected.<br /></span>
	<br />

	<h5>Album artists <small>(click to add)</small></h5>
	<div class="form-inline">
		Filter
		<input data-bind="textInput: filter" type="text" maxlength="128" />
	</div>
	<br />

	<div data-bind="foreach: artistSelections">
		<div data-bind="visible: !selected() && visible(), click: function () { selected(true); }, attr: { title: artist.additionalNames }" class="label label-artistSelection">			
			<span data-bind="text: artist.name"></span>
		</div>
	</div>
    <span data-bind="ifnot: somethingSelectable" class="extraInfo">No selectable artists.</span>
</div>